<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元旦活动</title>
    <script type="text/javascript" src="./js/tool.js"></script>
    <link rel="stylesheet" href="./css/normalize.min.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/common.min.css">
    <link rel="stylesheet" href="./css/loading.css">
    <link rel="stylesheet" href="./css/prize.min.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>

</head>

<body class="animated ">
    <div class="loading">
        <div class="cube cube1"><img src="./images/heart.png" alt="" /></div>
        <div class="cube cube2"><img src="./images/heart.png" alt="" /></div>
        <div class="cube cube3"><img src="./images/heart.png" alt="" /></div>
        <div class="cube cube4"><img src="./images/heart.png" alt="" /></div>
        <div class="cube cube5"><img src="./images/heart.png" alt="" /></div>
        <div class="loading-info">
            <p>加载中...</p>
        </div>
    </div>
    <header>
        <a class="result f36 lemiao">游戏结果：</a>
    </header>
    <article>
        <div id="heartData" class="f28 lemiao">
            <p><span class="lovetag"></span></p>
            <p><span class="lovetag"></span><span><img id="uImg"></img></span><span class="lovetag"></span><i class="_2018word f36 heilizhi">2018，<b id="uName"></b>最爱...</i>
            </p>
            <p><span class="lovetag"></span><span class="lovetag"></span></p>
        </div>
    </article>
    <footer id="prizeBox">

    </footer>
    <div class="addr animated panel ">
        <div class="addr_contianer panel_contianer ">
            <a href="javascript:void(0);" id="formBtn"></a>
            <p class="t-c m-t-30 lianghei f36"><i class="my_heart"></i>收件信息填写</p>
            <form id="myform" action="">
                <ul>
                    <li><label for="u_name">姓名：</label><input id="u_name" type="text" name="u_name" value=""></li>
                    <li><label for="u_phone">电话：</label><input id="u_phone" type="text" name="u_phone" value=""></li>
                    <li><label for="u_addr">地址：</label><input id="u_addr" type="text" name="u_address" value=""></li>
                </ul>
            </form>
            <p class="t-c" id="sendBtn"> <a href="javascript:void(0);">
                    </a>
            </p>
        </div>
    </div>
    <div class=" follow  animated panel">
        <div class="ruler_contianer panel_contianer">
            <!-- <a href="#" id="followBtn"></a> -->
            <p class="t-c m-t-30 lemiao"><i class="my_heart"></i>啊哦，你还没有关注哦~</p>
            <p class="t-c lemiao">扫一扫下方二维码关注“四川联通”即可参与游戏</p>
            <p class="t-c"> <a href="javascript:void(0);" id="imgCode">
                    <img src="./images/wechat.png" alt=""></a>
            </p>
        </div>
    </div>
    <div class="bindphone animated panel ">
        <div class="bindphone_contianer panel_contianer ">
            <a href="# " id="bindphoneBtn"></a>
            <p class="t-c f48 "><i class="my_heart_broken"></i></p>
            <p class="f30 ">啊哦，您还没有绑定手机号码， 无法领取流量哦~</p>
            <p class="t-c"> <a href="" id="bindBtn">
                        </a>
            </p>
        </div>
    </div>
    <div class="followflow animated panel ">
        <div class="followflow_contianer panel_contianer ">
            <a href="javascript:void(0);" id="rulerBtn"></a>
            <p class="t-c"><i class="my_heart"></i></p>
            <p class="t-c f25"><b>领取流量号码：</b><a id="userphone" href="javascript:void(0);">12345678910</a></p>
            <p class="f24 ">流量将于活动结束后10个工作日内到账并短信通知，请注意查收。</p>
            <p class="t-c" id="flowBtn"> <a></a>
            </p>
        </div>
    </div>
    <div class="outLink  animated panel">
        <div class="outLink_contianer panel_contianer ">
            <a href="javascript:void(0);" id="outBtn"></a>
            <p class="t-c"><i class="my_heart"></i></p>
            <p>1.点击 “我要领取”按钮进入领取页面，输入手机号完成注册。</p>
            <p>2.免费领取便携保温杯至个人账号。</p>
            <p>3.下载蜜芽APP，保温杯领取后会自动加入购物车，7天内加购其他商品(除拼团)满39免邮带走。</p>
            <p>有效期截止到2018年1月31日。</p>
            <p class="t-c" id="outLinkBtn"> <a>

                        </a>
            </p>
        </div>
    </div>
    <div class="share">

    </div>
    <script src='./js/follow.js'></script>
    <script type="text/javascript" src="./js/openInWeChat.js"></script>
    <script>
        //强制在微信浏览器打开
        WechatUseAgent();
    </script>
    <script>
        //禁止拖动
        preventMove();

        var ajaxNum = [1];

        lisetnerAjax(ajaxNum, 'body');

        var app = {
            openId: GetRequest()['openid'],
            user: {},
            postData: {},
            prize: [],

            init: function() {
                var context = this;
                this.closePanel();
                this.sendInfo();
                this.bindCheck();
                this.getUserRecord();
                this.realGoodList();
            },
            realGoodList: function() {
                $.ajax({
                    type: 'post',
                    url: "http://10.122.202.211:8080/HD-newyear/newyear/getUserAddressInfo.action",
                    dataType: "jsonp",
                    jsonp: "callback",
                    data: {
                        openid: app['openId']
                    },
                    beforeSend: function() {
                        //判断openId传过来了没有
                        if (!Boolean(app['openId'])) {
                            alert('获取openId失败');
                        }

                        $('.runToreceive').off('click');
                    },
                    complete: function() {

                    },
                    success: function(reospnse) {
                        if (Boolean(reospnse.data)) {
                            var res = reospnse.data;
                            $('#u_name').val(res.username);
                            $('#u_phone').val(res.u_phone);
                            $('#u_addr').val(res.address);
                        }
                    },
                    error: function() {}
                });
            },
            closePanel: function() {
                closeBar('#formBtn', '.addr');
                closeBar('#followBtn', '.follow');
                closeBar('#bindphoneBtn', '.bindphone');
                closeBar('#rulerBtn', '.followflow');
                closeBar('#outBtn', '.outLink');

            },
            addrPanel: function() {
                $('.addr').show().addClass('slideInDown').removeClass('slideOutUp');
            },
            folowPanel: function() {
                var context = this;
                if ('Y' !== context.user.bindPhoneStatus) {
                    $('.bindphone').show().addClass('slideInDown').removeClass('slideOutUp');
                    $('#userphone').text(context.user.phone);
                } else {
                    $('.followflow').show().addClass('slideInDown').removeClass('slideOutUp');
                }
            },
            sendInfo: function() {
                var context = this;
                $('#sendBtn').on('click', function() {
                    var data = $('#myform').serializeArray()
                    //调用tool。js
                    context.postData = arry2json(data);
                    context.postData.openid = app['openId'];
                    ////console.log(context.postData);
                    $.ajax({
                        type: 'post',
                        url: "http://10.122.202.211:8080/HD-newyear/newyear/ExcuteSaveAdd.action",
                        dataType: "jsonp",
                        jsonp: "callback",
                        data: context.postData,
                        beforeSend: function() {
                            //判断openId传过来了没有
                            if (!Boolean(app['openId'])) {
                                alert('获取openId失败');
                            }
                        },
                        complete: function() {},
                        success: function(reospnse) {
                            alert('提交成功');
                            autocloseBar('.addr');
                        },
                        error: function() {}
                    })
                });
            },
            receivePrize: function() {
                var context = this;

                function showPanel() {
                    //console.log($(this).attr('data-type'));
                    //console.log(Number($(this).attr('data-type')));
                    switch (Number($(this).attr('data-type'))) {
                        case 1:
                            context.folowPanel();
                            $('#userphone').text(context.user.bindPhone.phone);

                            function reveiceFlow() {
                                $.ajax({
                                    type: 'post',
                                    url: "http://10.122.202.211:8080/HD-newyear/newyear/getFlow.action",
                                    dataType: "jsonp",
                                    jsonp: "callback",
                                    data: {
                                        openid: app['openid'],
                                        phone: context.user.bindPhone.phone,
                                        type: '',
                                        province: ''
                                    },
                                    beforeSend: function() {
                                        //判断openId传过来了没有
                                        if (!Boolean(app['openId'])) {
                                            alert('获取openId失败');
                                        }
                                        $('#flowBtn').off('click');
                                    },
                                    complete: function() {
                                        $('#flowBtn').on('click', reveiceFlow);

                                    },
                                    success: function(reospnse) {
                                        autocloseBar('.followflow');
                                        alert(reospnse.message);
                                    },
                                    error: function() {}
                                })
                            }
                            $('#flowBtn').on('click', reveiceFlow);
                            break;
                        case 2:
                            context.addrPanel();
                            break;
                        case 3:
                            //console.log(context.user.bindPhone);
                            $.ajax({
                                type: 'post',
                                url: "http://10.122.202.211:8080/HD-newyear/newyear/getTicketsCode.action",
                                dataType: "jsonp",
                                jsonp: "callback",
                                data: {
                                    phone: context.user.bindPhone.phone
                                },
                                beforeSend: function() {
                                    //判断openId传过来了没有
                                    if (!Boolean(app['openId'])) {
                                        alert('获取openId失败');
                                    }
                                },
                                complete: function() {

                                },
                                success: function(reospnse) {
                                    alert(reospnse.message);
                                },
                                error: function() {}
                            });
                            break;
                        case 4:
                            autoshowBar('.outLink');
                            $('#outLinkBtn').click(function() {
                                location.href = 'https://m.mia.com/gift_event/index/5555555?sfrom=2c007913000c670048165a28d3cd2f433';
                            })
                            break;
                    }


                }
                $('.runToreceive').on('click', showPanel);
            },
            lovetagPanel: function(love) {
                var context = this;
                $.each($('.lovetag'), function(index, val) {
                    $(val).html(love[index].name);
                });
            },
            fillPrizeBox: function() {
                var context = this;
                var html = ``;
                var len = context.prize.length;
                //console.log(context.prize);
                if (len == 0) {
                    html = `<p class="t-c f36 lemiao">你在游戏中还没有中奖哦~</p>`;
                    return;
                }
                html = `<p class="t-c f36 lemiao">你在游戏中还意外获得了这些哦~</p>`;
                for (var i = 0; i < context.prize.length; i++) {
                    html += `<p class="t-c f30"><span>${context.prize[i].name}</span><a  data-type="${context.prize[i].prizetype}" class='runToreceive' href="javascript:void(0);"></a></p>`;
                }
                $('#prizeBox').html(html);
                //绑定点击事件
                context.receivePrize();
            },
            getUserRecord: function() {
                var context = this;
                $.ajax({
                    tyle: 'post',
                    url: "./json/prizeList.json?random=" + Math.random(),
                    data: {
                        openid: app['openId']
                    },
                    beforeSend: function() {
                        //判断openId传过来了没有
                        if (!Boolean(app['openId'])) {
                            alert('获取openId失败');
                        }
                    },
                    success: function(reospnse) {
                        if (0 == reospnse.code) {
                            //显示文字
                            if (Boolean(reospnse.data)) {
                                $.each(reospnse.data, function(index, val) {
                                    // //console.log(val);
                                    if (!val.prizetype) {
                                        context.user.love.push(val);
                                    } else {
                                        context.prize.push(val);
                                    }
                                })

                            }
                            context.fillPrizeBox();

                            //console.log(context.user.love);
                            var timer = setInterval(function() {
                                if (context.user.love.length == 5) {
                                    context.lovetagPanel(context.user.love);
                                    clearInterval(timer);
                                    timer = null;
                                }
                            }, 200);

                        }
                    },
                    error: function() {}
                });
            },
            bindCheck: function() {
                var context = this;
                context.user = judgeFocuse(app['openid']);

                var timer = setInterval(function() {
                    if (Boolean(context.user['name'])) {
                        //console.log(context.user.name);

                        $('#uImg').attr('src', context.user.imgUrl);
                        $('#uName').text(context.user.name);

                        clearInterval(timer);
                        timer = null;
                    }
                }, 200);

            }
        }
        app.init();
    </script>
</body>

</html>
